<template>
  <div>
    <van-nav-bar :title="$t('pageSign.forget_pwd')" left-arrow @click-left="$router.back()" />
    <div class="forget">
      <div class="form-row">
        <van-form @submit="onSubmit">
          <!-- <van-field
        v-model="username"
        :label="$t('pageSign.account')"
        :placeholder="$t('pageSign.account')"
        :rules="[{ required: true }]"
      /> -->
          <van-field v-model="username" :rules="[{ required: true }]">
            <div slot="label" class="slot-label">
              <select v-model="loginType" class="select">
                <option value="phone">{{ $t('pageSign.phone') }}</option>
                <option value="email">{{ $t('pageSign.email') }}</option>
              </select>
            </div>
            <div v-if="loginType === 'email'" slot="input" class="slot-inp">
              <input v-model="username" type="text" class="van-field__control" :placeholder="$t('pageSign.email')" />
            </div>
            <div v-if="loginType === 'phone'" slot="input" class="slot-inp">
              <span class="tel-area" @click="showPicker=true">{{ area_num }} -</span>
              <input v-model="username" type="number" class="van-field__control" :placeholder="$t('pageSign.phone')" />
            </div>
          </van-field>
          <van-field v-model="verification_code" clearable  :placeholder="$t('pageSign.valid_code')" :rules="[{ required: true }]">
            <template #button>
              <van-button size="small" type="primary" block @click.prevent="handleGetCode">
                <template v-if="times === 60">{{ $t('pageSign.send_code') }}</template>
                <template v-else>{{ times }}s</template>
              </van-button>
            </template>
          </van-field>
          <van-field v-model="password" type="password"  :placeholder="$t('pageSign.pwd')" :rules="[{ required: true }]" />
          <van-field v-model="confirm_password" type="password"  :placeholder="$t('pageSign.pwd')" :rules="[{ required: true }]" />
          <div style="margin: 15px">
            <van-button block type="info" native-type="submit" class="submit">{{ $t('actions.submit') }}</van-button>
          </div>
        </van-form>
      </div>
      <van-popup v-model="showPicker" position="bottom" round>
        <van-picker show-toolbar :columns="areaNums" :visible-item-count="10" @confirm="confirmArea" @cancel="showPicker=false" />
      </van-popup>
      <div class="bg-icon"></div>
      <div class="max-bg">
      </div>
      <div class="min-bg"></div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { areaNums } from '@/constants/area_nums'
import { isPhone, isEmailOrPhone } from '@/utils/validator'
export default {
  data () {
    return {
      areaNums,
      username: '',
      password: '',
      confirm_password: '',
      verification_code: '',
      loginType: 'phone',
      area_num: '86',
      showPicker: false,
      times: 60
    }
  },
  methods: {
    ...mapActions({
      getCode: 'user/getCode',
      login: 'user/login',
      forgetPwd: 'user/forgetPwd'
    }),
    handleGetCode () {
      if (isEmailOrPhone(this.username)) {
        const username = isPhone(this.username) ? `${this.area_num}-${this.username}` : this.username
        this.getCode(username)
          .then(() => {
            this.getTime()
          })
          .catch(({ msg }) => {
            this.$toast(msg)
          })
      } else {
        this.$toast(this.$t('pageSign.account_err'))
      }
    },
    getTime () {
      this.timer = setInterval(() => {
        this.times--
        if (this.times === 0) {
          clearInterval(this.timer)
          this.times = 60
        }
      }, 1000)
    },
    onSubmit () {
      if (this.password !== this.confirm_password) {
        this.$toast(this.$t('pageSign.pwd_err'))
        return false
      }
      const username = this.loginType === 'phone'
        ? `${this.area_num}-${this.username}`
        : this.username
      const payload = {
        username,
        password: this.password,
        verification_code: this.verification_code
      }
      this.forgetPwd(payload).then((res) => {
        this.$toast(res.msg)
        this.$router.replace('/sign/login')
      })
    },
    confirmArea (values) {
      this.area_num = values.phone_code
      this.showPicker = false
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar.van-hairline--bottom{
  /deep/.van-nav-bar__content{
    .van-nav-bar__left{
      .van-icon{
        color: #ffffff;
      }
    }
    .van-nav-bar__title{
      color: #ffffff;
    }
  }
}
.forget{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 24px;
    line-height: 1;
    min-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background: linear-gradient(139deg, #203FFF 0%, #00B8FF 100%);
    .bg-icon{
        position: absolute;
        top: 97px;
        right: -124px;
        width: 341px;
        height: 362px;
        border-radius: 50%;
        background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.37) 100%);
        opacity: 0.18;
    }
    .max-bg{
      position: absolute;
      bottom: -150px;
      left: -150px;
      width: 300px;
      height: 300px;
      box-sizing: border-box;
      border-radius: 50%;
      background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.37) 100%);
      opacity: 0.1;
    }
    .min-bg{
      position: absolute;
      bottom: -100px;
      left: -100px;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.37) 100%);
      opacity: 0.09;
    }
  .form-row{
    position: relative;
    margin-top: 45px;
    background: #FFFFFF;
    border-radius: 28px;
    z-index: 1;
    .van-form{
      padding: 22px 30px;
      /deep/.van-cell__title{
        margin-right: 5px;
      }
      /deep/.van-field__label{
        width: auto;
        display: flex;
        align-items: center;
        .select{
          font-size: 14px;
          width: auto;
          background: transparent;
          border: none;
        }
        .van-icon{
          font-size: 14px;
        }
      }
      .van-field{
        position: relative;
        margin-top: 24px;
        padding: 0;
        &:after{
          left: 0;
          right: 0;
          border-bottom: 1px solid #4CCBF2;
        }
        /deep/input{
          height: 34px;
          font-size: 16px;
          font-weight: 400;
        }
        .slot-inp{
          display: flex;
          .tel-area{
            flex: 30px 0 0;
          }
        }
        /deep/.van-field__button{
          position: absolute;
          right: 0;
          bottom: -0px;
          padding: 0 0 0 13px;
          background: #ffffff;
          z-index: 1;
          .van-button{
            width: 96px;
            height: 30px;
            font-size: 12px;
            font-weight: 500;
            color: #4CCBF2;
            border-radius: 16px;
            background: transparent;
            border: 1px solid #4CCBF2;
          }
        }
      }
      .submit{
        margin-top: 30px;
        height: 48px;
        font-size: 20px;
        font-weight: 500;
        color: #FFFFFF;
        background: linear-gradient(137deg, #91E2FF 0%, #0B6CFF 100%);
        border-radius: 26px;
        border: none;
      }
      .van-checkbox{
        margin-top: 10px;
        /deep/.van-checkbox__icon {
          height: 12px;
          .van-icon{
            height: 12px;
            width: 12px;
            font-size: 10px;
            &:before{
              font-size: 10px;
            }
          }
        }
        /deep/.van-checkbox__label{
          margin-left: 2px;
          font-size: 11px;
          font-weight: 400;
          color: rgba(155, 155, 155, 0.49);
          p{
            display: inline-block;
            color: #079EFF;
          }
        }
      }
    }
    .links{
        display: flex;
        text-align: center;
        padding: 20px 0 24px 0;
        a{
          flex: 1;
          font-size: 12px;
          font-weight: 400;
          color: #079EFF;
          &:last-child{
            border-left: 1px solid #F1F1F1;
          }
        }
      }
  }
}
</style>
